<template>
  <div class="mb-20">
    <div class="bg-[#FFFCF0] mb-14">
      <div class="max-w-5xl px-8 mx-auto h-64 relative flex items-center">
        <img
          class="absolute"
          src="https://www.lucksec.cn/img/faq.bd6068d3.svg"
        />
        <h2 class="text-center m-auto text-[32px] invisible sm:visible">
          frequently ask question
        </h2>
      </div>
    </div>
    <div class="max-w-5xl px-8 mx-auto">
      <div class="relative rounded w-full">
        <div
          class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            class="h-5 w-5 text-black-70"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            ></path>
          </svg>
        </div>
        <input
          type="search"
          name="search"
          id="search"
          placeholder="Please type keywords to find answers"
          class="focus:ring-yellow focus:border-yellow block w-full border-none bg-black-6 pl-[60px] pr-32 text-xs sm:text-sm rounded py-3 sm:py-5"
          v-model="keyword"
        />
        <div
          class="absolute inset-y-0 right-0 sm:right-2 pr-1 flex items-center"
        >
          <button
            type="button"
            class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary sm:w-28"
          >
            <div @click="search">Search</div>
            <!---->
          </button>
        </div>
      </div>
      <dl class="mt-6 space-y-5">
        <Callsp
          v-for="(item, index) in newArr"
          :title="item.name"
          :desc="item.desc"
        ></Callsp>
      </dl>
    </div>
  </div>
</template>
<script>
import Callsp from "./components/callsp.vue";
export default {
  data() {
    return {
      arr: [],
      newArr: [],
      keyword: "",
    };
  },
  methods: {
    search() {
      this.newArr = this.arr.filter((item) => {
        return item.name.includes(this.keyword);
      });
    },
  },
  components: {
    Callsp,
  },
  created() {
    this.$api.getQuestions().then((res) => {
      this.arr = res.data.data;
      this.newArr = res.data.data;
    });
  },
};
</script>
<style lang="" scoped></style>
